<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <link rel="shortcut icon" href="images/webico/favicon.ico"/>
        <link rel="Bookmark" href="images/webico/favicon.ico"/>
        <title>mengpp</title>
        <style type="text/css">
            body{ padding: 0; margin: 0;}
            ul,ol{ list-style: none;}
            a{ text-align: center; text-decoration: none; color: inherit; display: block;}
            .info{ margin-top: 30px; height: 122px; overflow: hidden;}
            .info td,.info th{ height: 38px; line-height: 38px; text-align: center;}
            .fanye-box{ width: 1000px; margin: 50px auto 0;}
            .fanye-box ul a{ box-sizing: border-box; padding: 6px 8px; line-height: 1em; float: left; border: 1px solid #eee; margin: 0 5px;}
            .fanye-box ul a:hover,.fanye-box ul li.on a{ background: #e34d3f; color: #fff;}
            .fond input{ width: 30px; box-sizing: border-box; height: 30px; margin: 0 4px;}
        </style>
    </head>
    <body>
        <div id="Js-info" class="info">
            <table border="1" cellspacing="0" cellpadding="0" width="1000" align="center">
                <tr>
                    <th>学号</th><th>姓名</th><th>年龄</th><th>专业</th><th>成绩</th>
                </tr>
                <tr><td>2001</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2002</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2003</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2004</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2005</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2006</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2007</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2008</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2009</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2010</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2011</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2012</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2013</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2014</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
                <tr><td>2015</td><td>张三</td><td>20</td><td>软件</td><td>80</td></tr>
            </table>
        </div>
        <div class="fanye-box" id="Js-fanye">
            <!--<ul>
                <div class="first"><a href="" id="Js-first">首页</a><a href="" id="Js-pre">上一页</a></div>
                <li class="on"><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">5</a></li>
                <li><a href="">6</a></li>
                <li><a href="">7</a></li>
                <div class="second"><a href="" id="Js-next">下一页</a><a href="" id="Js-last">末页</a></div>
                <div class="fond"><input type="text" name="" id="" value="" /><input type="submit" value="go" /></div>
            </ul>-->
        </div>
    </body>
    <script type="text/javascript">
        var oContent = document.getElementById("Js-info");
        var pages = document.getElementById("Js-fanye");
        var pgindex = 1;
        window.onload=function(){
            var allpages = Math.ceil(parseInt(oContent.scrollHeight)/parseInt(oContent.offsetHeight));
            var pageC = "<ul id='Js-fen'><div class='first'><a href='javascript:' id='Js-first'>首页</a><a href=\"javascript:gotopage('-1');\" id='Js-pre'>上一页</a></div>";
            for (var i=1;i<=allpages;i++) {
                pageC += "<li><a href=\"javascript:showPage('"+i+"');\">" + i + "</a></li>";
            }
            var pageD = "共" + allpages +"页";
            pages.innerHTML = pageC + "<div class='second'><a href=\"javascript:gotopage('1');\" id='Js-next'>下一页</a><a href='' id='Js-last'>末页</a></div><div class='fond'><input type='text' name='' id='' value='' /><input type='submit' value='go' /></div></ul>" + pageD;
            var s = document.getElementById("Js-fen");
            s.firstChild.nextSibling.setAttribute("class","on");
            //alert(allpages);
        };
        function gotopage(value){
            try{
             value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
             }catch(e){
             
             }
        }
        function showPage(pageINdex)
        {
            oContent.scrollTop=(pageINdex-1)*parseInt(oContent.offsetHeight-2);                                                                  //根据高度，输出指定的页
            pgindex=pageINdex;
        }
//      function setCurrent(i){
//          var parentElement = document.getElementById("Js-fen").getElementsByTagName("li");
//          for (var j=0;j<parentElement.length;j++){
//              if(j==i){
//                  parentElement[j]..className="on";
//              }
//          }
//      }
    </script>
</html>